<template>
  <div class="app" :class="{'index': $route.path === '/'}">
    <top/>
    <my-header/>
    <nuxt/>
    <my-footer/>

    <login/>


    <!--<nuxt-link v-show="$route.path !== '/'" :to="'/'" class="go-home">首页</nuxt-link>-->

    <Toolbar class="tool-bar"></Toolbar>
  </div>
</template>

<script>
  import '~/element-variables.scss'
  import Top from '~/components/Top.vue'
  import MyHeader from '~/components/Header.vue'
  import MyFooter from '~/components/Footer.vue'
  import Login from '~/components/Login.vue'
  import Toolbar from '~/components/Toolbar.vue'

  // 解决IE下不支持的数组的find 和 includes方法
  import { ArrayFind, ArrayIncludes } from '~/plugins/utils'

  ArrayFind()
  ArrayIncludes()

  export default {
    data () {
      return {
        scrollTag: false,
        timer: null,
        scroll: '',
        speed: 100
      }
    },
    components: {
      Top,
      MyHeader,
      MyFooter,
      Login,
      Toolbar
    },

    methods: {
      goTop () {
        clearInterval(this.timer)
        this.scroll = document.body.scrollTop || document.documentElement.scrollTop
        this.timer = setInterval(() => {
          if (this.scroll < 0) {
            clearInterval(this.timer)
            return false
          }
          this.scroll -= this.speed
          window.scrollTo(0, this.scroll)
        }, 16)
      },
      scrollTop () {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        if (scrollTop > 500) {
          this.scrollTag = true
        } else {
          this.scrollTag = false
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
  .app{

    padding-bottom: 355px;
  }
  .index{
    background-color: #f2f2f2;
  }
  .tool-bar {
    position: fixed;
    right: 10px;
    bottom: 100px;
  }
</style>
